<template>
  <el-card>
    <bread data1="商品管理" data2="分类参数"></bread>
    <el-alert title="只允许为第三级分类设置参数" type="error" class="jg">
    </el-alert>
    <el-form>
      <el-form-item label="商品分类">
        <el-cascader
          v-model="value"
          :options="categories"
          :props="prpoes"
          :show-all-levels="false"
          @change="handerchange"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <el-tabs v-model="active" @tab-click="handleClick" type="card">
      <el-tab-pane label="动态参数" name="1">
        <el-button type="success" @click="setparams">设置动态参数</el-button>
        <el-table :data="arrDynamic" style="width: 100%" >
          <el-table-column type="expand" label="#" >
            <template v-slot="scope"> 
            <el-tag
              :key="tag"
              v-for="tag in scope.row.attr_vals"
              closable
              :disable-transitions="false"
              @close="handleClose(scope.row.attr_vals,tag,scope.row.attr_name,scope.row.attr_id)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(scope.row.attr_vals,scope.row.attr_name,scope.row.attr_id)"
              @blur="handleInputConfirm(scope.row.attr_vals,scope.row.attr_name,scope.row.attr_id)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ New Tag</el-button
            >
            </template>
          </el-table-column>
           <el-table-column label="属性名称" prop="attr_name">
           </el-table-column>
          <el-table-column label="操作" prop="desc">
            <template v-slot="scope">
              <el-row>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  plain
                  @click="editorUser(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  plain
                  @click="deluser(scope.row.attr_id)"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="2">
        <el-button type="success" @click="setparams">设置静态参数</el-button>
         <el-table :data="staticParameters" style="width: 100%">
          <el-table-column label="#" width='60px' type='index'>
          </el-table-column>
           <el-table-column label="属性名称" prop="attr_name" width='100px'>
           </el-table-column>
           <el-table-column label="属性值" prop="attr_vals">
           </el-table-column>
          <el-table-column label="操作" prop="desc">
            <template v-slot="scope">
              <el-row>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  plain
                  @click="editorUser(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  plain
                  @click="deluser(scope.row.attr_id)"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 信息对话框 -->
    <el-dialog title="新增参数信息" :visible.sync="dialogFormVisible">
  <el-form :model=" arrFrom">
    <el-form-item label="参数名称" >
      <el-input v-model="arrFrom.attr_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="参数值">
      <el-input v-model="arrFrom.attr_vals" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitArr">确 定</el-button>
  </div>
</el-dialog>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>是否删除该商品参数</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="delparams()">确 定</el-button>
  </span>
</el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      prpoes: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children"
      },
      categories: [],
      // value和级联选择器的v-model双向绑定，
      // 里面可以填写prpoes里面value的值 如果填写 就会默认显示出label对应的值
      value: [],
      staticParameters: [],
      arrDynamic: [],
      active: "1",
      inputVisible: false,
      inputValue: "",
      dialogFormVisible:false,
      dialogVisible:false,
      parampsId:'',
      arrFrom:{
        attr_name:'',
        attr_vals:''
      }
    };
  },
  methods: {
    async handerchange() {
      if (this.value.length === 3) {
        // 动态参数
        const res = await this.$http.get(
          `categories/${this.value[2]}/attributes?&sel=many`
        );
        this.arrDynamic = res.data.data;
        this.arrDynamic.forEach(item => {
          //  需要从新赋值，因为split返回新的字符串 原字符串不变
          // 有的没有三级数组 所以遍历之后会报错
          item.attr_vals =
            item.attr_vals.length === 0 ? [] : item.attr_vals.trim().split(",");
        });
        // 静态参数
        const res1 = await this.$http.get(
          `categories/${this.value[2]}/attributes?&sel=only`
        );
        this.staticParameters = res1.data.data;
      }
    },
    async getcategories() {
      const res = await this.$http.get(`categories?type=3`);
      this.categories = res.data.data;
    },
    handleClick() {},
    editorUser() {},
    async deluser(attr_id) {
      this.dialogVisible = true
      this.parampsId = attr_id
     
    },
    async delparams(){
      this.dialogVisible =false
      const res = await this.$http.delete(`categories/${this.value[2]}/attributes/${this.parampsId}`)
      const {meta:{msg}} =res.data
      this.$message.success(msg)
      this.handerchange()
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    async handleInputConfirm(attr_vals,attr_name,attr_id) {
      let inputValue = this.inputValue;
      if (inputValue) {
         this.arrDynamic[0].attr_vals.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
       let putData = {
        attr_name:attr_name,
        attr_sel:'many',
        attr_vals:attr_vals
      }
     const res = 
     await this.$http.put(`categories/${this.value[2]}/attributes/${attr_id}`,putData)
    },
    async handleClose(attr_vals,tag,attr_name,attr_id) {
     attr_vals.splice(attr_vals.indexOf(tag), 1);
      let putData = {
        attr_name:attr_name,
        attr_sel:'many',
        attr_vals:attr_vals
      }
     const res = 
     await this.$http.put(`categories/${this.value[2]}/attributes/${attr_id}`,putData)
    },
    setparams(){
      if( this.value.length !== 3){
        this.$message.warning('请先选择三级分类')
        return
      }else{
         this.dialogFormVisible =true
      }
    },
    async submitArr(){
      if( this.active === '1'){
      var arrFrom = {
        ...this.arrFrom,
        attr_sel:'many'
      }
    const res = await this.$http.post(`categories/${this.value[2]}/attributes`,arrFrom)
     }else if( this.active === '2'){
        console.log(2)
       var arrFrom = {
        ...this.arrFrom,
        attr_sel:'only'
        
      }
    const res = await this.$http.post(`categories/${this.value[2]}/attributes`,arrFrom)
      }
      this.handerchange()
     this.dialogFormVisible = false
    }

  },
  created() {
    this.getcategories();
  }
};
</script>

<style lang="scss" scoped>
.jg {
  margin: 25px 0;
}
</style>
